<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="Application" style="text-align: center;">
        <!-- 标题 -->
        <h1>{{title}}</h1>
        <!-- 创建账号和密码输入组件 -->
        <div v-if="noLogin">账号：<input v-model="userName" type="text" /></div>
        <div v-if="noLogin">密码：<input v-model="password" type="password" /></div>
        <!-- 登录按钮 -->
        <div v-on:click="click" style="border-radius: 30px;width: 100px; margin: 20px auto; color: white; background-color: blue;">{{buttonTitle}}</div>
    </div>
    <script>
        const App = {
            data () {
                return {
                    title:"欢迎您：未登录",
                    noLogin:true,
                    userName:"",
                    password:"",
                    buttonTitle:"登录"
                }
            },
            methods: {
                click() {
                    if (this.noLogin) {
                        this.login()
                    } else {
                        this.logout()
                    }
                },
                // 登录
                login() {
                    // 判断账号密码是否为空
                    if (this.userName.length > 0 && this.password.length > 0) {
                        // 登录提示后刷新页面
                        alert(`userNmae:${this.userName} password:${this.password}`)
                        this.noLogin = false
                        this.title = `欢迎您:${this.userName}`
                        this.buttonTitle = "注销"
                        this.userName = ""
                        this.password = ""
                    } else {
                        alert("请输入账号密码")
                    }
                },
                // 登出
                logout() {
                    // 清空登录数据
                    this.noLogin = true
                    this.title = `欢迎您:未登录`
                    this.buttonTitle = "登录"
                }
            }
        }
        Vue.createApp(App).mount("#Application")
    </script>
    
</body>
</html>